/**
 * Floating Object Components
 * Requirements: 1.5, 1.2
 */

import { useRef } from 'react';
import { Mesh, Group } from 'three';
import { useFrame } from '@react-three/fiber';
import { Text } from '@react-three/drei';
import { FloatingObject } from '@/types';

/**
 * Props for individual floating object components
 */
interface FloatingObjectComponentProps {
  object: FloatingObject;
}

/**
 * Emoji object component - renders emoji faces as 3D objects
 * Requirements: 1.2 - Implements floating animation with rotation and floating motion
 */
export function EmojiObject({ object }: FloatingObjectComponentProps) {
  const groupRef = useRef<Group>(null);
  const timeOffset = useRef(Math.random() * Math.PI * 2);
  
  // Map emoji types to actual emoji characters
  const emojiMap: Record<string, string> = {
    'happy-face': '😊',
    'sad-face': '😢',
    'crying-face': '😭',
  };
  
  const emoji = emojiMap[object.id] || '😊';
  
  // Animate the object - rotation and floating motion
  useFrame((state) => {
    if (groupRef.current) {
      const time = state.clock.elapsedTime * object.animationSpeed;
      
      // Continuous rotation
      groupRef.current.rotation.x = object.rotation.x + time * 0.3;
      groupRef.current.rotation.y = object.rotation.y + time * 0.5;
      groupRef.current.rotation.z = object.rotation.z + time * 0.2;
      
      // Floating motion (sine wave)
      groupRef.current.position.y = 
        object.position.y + Math.sin(time + timeOffset.current) * 0.5;
    }
  });
  
  return (
    <group
      ref={groupRef}
      position={[object.position.x, object.position.y, object.position.z]}
      scale={object.scale * 2}
    >
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="#ffffff" transparent opacity={0.8} />
      </mesh>
      <Text
        position={[0, 0, 1.1]}
        fontSize={2}
        color="white"
        anchorX="center"
        anchorY="middle"
      >
        {emoji}
      </Text>
    </group>
  );
}

/**
 * Food object component - renders food items as 3D objects
 * Requirements: 1.2 - Implements floating animation with rotation and floating motion
 */
export function FoodObject({ object }: FloatingObjectComponentProps) {
  const groupRef = useRef<Group>(null);
  const timeOffset = useRef(Math.random() * Math.PI * 2);
  
  // Map food types to emoji representations
  const foodMap: Record<string, string> = {
    'egg-tart': '🥧',
    'cake': '🍰',
  };
  
  const food = foodMap[object.id] || '🍰';
  
  // Animate the object - rotation and floating motion
  useFrame((state) => {
    if (groupRef.current) {
      const time = state.clock.elapsedTime * object.animationSpeed;
      
      // Continuous rotation
      groupRef.current.rotation.x = object.rotation.x + time * 0.4;
      groupRef.current.rotation.y = object.rotation.y + time * 0.6;
      groupRef.current.rotation.z = object.rotation.z + time * 0.3;
      
      // Floating motion (sine wave)
      groupRef.current.position.y = 
        object.position.y + Math.sin(time + timeOffset.current) * 0.6;
    }
  });
  
  return (
    <group
      ref={groupRef}
      position={[object.position.x, object.position.y, object.position.z]}
      scale={object.scale * 2}
    >
      <mesh>
        <boxGeometry args={[1.2, 1.2, 1.2]} />
        <meshStandardMaterial color="#FFD700" transparent opacity={0.8} />
      </mesh>
      <Text
        position={[0, 0, 0.7]}
        fontSize={1.5}
        color="white"
        anchorX="center"
        anchorY="middle"
      >
        {food}
      </Text>
    </group>
  );
}

/**
 * Nature object component - renders nature elements as 3D objects
 * Requirements: 1.2 - Implements floating animation with rotation and floating motion
 */
export function NatureObject({ object }: FloatingObjectComponentProps) {
  const groupRef = useRef<Group>(null);
  const timeOffset = useRef(Math.random() * Math.PI * 2);
  
  // Map nature types to emoji representations
  const natureMap: Record<string, string> = {
    'cloud': '☁️',
    'sun': '☀️',
    'star': '⭐',
    'moon': '🌙',
  };
  
  const nature = natureMap[object.id] || '☁️';
  
  // Animate the object - rotation and floating motion
  useFrame((state) => {
    if (groupRef.current) {
      const time = state.clock.elapsedTime * object.animationSpeed;
      
      // Continuous rotation (slower for clouds)
      groupRef.current.rotation.x = object.rotation.x + time * 0.2;
      groupRef.current.rotation.y = object.rotation.y + time * 0.3;
      groupRef.current.rotation.z = object.rotation.z + time * 0.15;
      
      // Floating motion (sine wave)
      groupRef.current.position.y = 
        object.position.y + Math.sin(time + timeOffset.current) * 0.7;
    }
  });
  
  return (
    <group
      ref={groupRef}
      position={[object.position.x, object.position.y, object.position.z]}
      scale={object.scale * 2}
    >
      <mesh>
        <sphereGeometry args={[1.5, 16, 16]} />
        <meshStandardMaterial color="#87CEEB" transparent opacity={0.8} />
      </mesh>
      <Text
        position={[0, 0, 1.6]}
        fontSize={2.5}
        color="white"
        anchorX="center"
        anchorY="middle"
      >
        {nature}
      </Text>
    </group>
  );
}

/**
 * Generic floating object renderer that selects the appropriate component
 */
export function FloatingObjectRenderer({ object }: FloatingObjectComponentProps) {
  switch (object.type) {
    case 'emoji':
      return <EmojiObject object={object} />;
    case 'food':
      return <FoodObject object={object} />;
    case 'nature':
      return <NatureObject object={object} />;
    default:
      return null;
  }
}
